<template>
  <div class="app-container">
    <table-layout title="菜单列表">
      <template v-slot:operate>
        <el-button type="primary" @click="onAdd">添加菜单</el-button>
      </template>
      <template v-slot:search>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </template>
      <el-table :data="menus" row-key="id" lazy :load="load">
        <el-table-column label="编号" prop="id" />
        <el-table-column label="菜单名称" prop="title" />
        <el-table-column label="菜单级数" prop="level" />
        <el-table-column label="前端名称" prop="name" />
        <el-table-column label="前端图标" prop="icon" />
        <el-table-column label="是否显示">
          <template slot-scope="{ row }">
            <el-switch :value="row.hidden === 1" />
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <span class="operate" @click="onEdit(row.id)">编辑</span>
          </template>
        </el-table-column>
      </el-table>
    </table-layout>
  </div>
</template>

<script>
import TableLayout from '@/components/TableLayout'
import { getMainList, getChildList } from '@/api/menu'

export default {
  name: 'Menu',
  components: {
    TableLayout
  },
  data() {
    return {
      menus: [],
      parentId: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resetParentId() {
      const parentId = this.$route.query.parentId
      if (parentId !== undefined) {
        this.parentId = parentId
      } else {
        this.parentId = 0
      }
    },
    getList() {
      getMainList().then(res => {
        this.menus = res.data.map(item => {
          item.hasChildren = item.children > 0
          return item
        })
      })
    },
    onSearch() {
      this.getList()
    },
    onAdd() {
      this.$router.push('/auth/menu/add')
    },
    onEdit(id) {
      this.$router.push(`/auth/menu/edit/${id}`)
    },
    handleShowNextLevel(id) {
      this.$router.push(`/auth/menu?parentId=${id}`)
    },
    load(tree, treeNode, resolve) {
      getChildList(tree.id).then(res => {
        resolve(res.data)
      })
    }
  }
}
</script>

<style></style>
